import { NumberPanelService } from './numberpanel.service';
import { MessageBoxService, GrowlMessageType } from './../../messageBoxService';
import { MdDialogConfig, MdDialogRef, MdSnackBar } from '@angular/material';
import { Component, OnInit } from '@angular/core';
@Component({
    selector: "div[num-panel]",
    template: `
        <md-dialog-content class="panel-dialog">
            <div fxLayout="row" class="padding-xs">
                <span fxFlex="100%">{{title}}</span>
                <span id="dialog-back-btn" class="i-close" (click)="close()"></span>
            </div>
            <div fxLayout="column" class="padding-xs">
                <div class="display-num border-bottom" fxLayout="row" fxLayoutAlign="center center">
                    <span>{{inputNum}}</span>
                </div>
                <div fxLayout="row" fxLayoutWrap="wrap">
                    <div class="v-gap-s" fxFlex="33%" *ngFor="let panel of panels" fxLayout="row" fxLayoutAlign="center center">
                        <div class="panel-btn" fxLayout="row" fxLayoutAlign="center center"  (click)="input(panel)">
                            <span *ngIf="panel.num != undefined">{{panel.num}}</span>
                            <span *ngIf="panel.icon" class="{{panel.icon}}"></span>
                        </div>
                    </div>
                </div>
            </div>
            <button class="pct100 color-white bgcolor-accent normal-btn" md-button (click)="confirm()">
                <span>确定</span>
            </button>
        </md-dialog-content>
    `,
    styleUrls: ["./numberpanel.component.scss"]
})
export class NumberPanel implements OnInit {
    constructor(
        public dialogRef: MdDialogRef<NumberPanel>,
        private msgSvr: MessageBoxService,
        private snackBar: MdSnackBar
    ) {
        NumberPanelService.current.regist(this);
    }
    title: string = "标题";
    inputNum: string = "";
    maxNumber: number = 10000;
    isDecimal: boolean = false;
    panels = [
        {
            num: "9"
        },
        {
            num: "8"
        },
        {
            num: "7"
        },
        {
            num: "6"
        },
        {
            num: "5"
        },
        {
            num: "4"
        },
        {
            num: "3"
        },
        {
            num: "2"
        },
        {
            num: "1"
        },
        {
            num: "C",
            type: "clean"
        },
        {
            num: "0"
        },
        {
            icon: "i-keyboard-backspace",
            type: "backspace"
        }
    ];

    ngOnInit() {
        if (this.isDecimal) {
            let panel: any = this.panels.find(p => {
                return (<any>p).num == "C";
            });
            panel.num = ".";
            panel.type = "dot";
        }
    }

    /**
     * 面板点击操作
     * @param panel 数字面板
     */
    input(panel) {
        if (panel.type) {
            if (panel.type == "clean") {
                this.inputNum = "";
            } else if (panel.type == "backspace") {
                if (this.inputNum.length) {
                    if (this.inputNum.length == 1) {
                        this.inputNum = "0";
                    } else {
                        this.inputNum = this.inputNum.substring(0, this.inputNum.length - 1);
                    }
                }

            } else if (panel.type == "dot") {
                if (!this.inputNum || !this.inputNum.length) {
                    this.inputNum = "0.";
                } else if (this.inputNum.indexOf(".") > -1) {
                    return;
                } else {
                    this.inputNum += panel.num;
                }
            }
        } else {
            let tempResult = ""
            if (Number(this.inputNum) || this.inputNum == "0.") {
                tempResult = this.inputNum + "" + panel.num;
            } else {
                tempResult = panel.num + "";
            }
            if ((Number(tempResult) || tempResult == "0") && Number(tempResult) <= this.maxNumber) {
                this.inputNum = tempResult;
            } else {
                let warnMsg = "最大输入值为" + this.maxNumber;
                this.msgSvr.Growl(GrowlMessageType.Warning, this.snackBar, warnMsg);
            }
        }
    }

    confirm() {
        if (!this.inputNum) {
            this.msgSvr.Growl(GrowlMessageType.Warning, this.snackBar, "输入错误");
            return;
        }
        if (this.inputNum.indexOf(".") > -1) {
            this.inputNum = Number(this.inputNum).toFixed(2);
        }
        this.dialogRef.close(this.inputNum);
    }

    close() {
        this.dialogRef.close();
    }
}